iT邦幫忙

2024 iThome 鐵人賽

DAY 6
1

運算符

算術運算符:

  • 特性: 進行基本的數學運算。
  • '%'運算符返回除法的餘數。
  • '**'是ES6新增的冪運算符。
let a = 10, b = 3;
console.log(a + b);  // 加法: 13
console.log(a - b);  // 減法: 7
console.log(a * b);  // 乘法: 30
console.log(a / b);  // 除法: 3.3333...
console.log(a % b);  // 取餘: 1
console.log(a ** b); // 冪運算: 1000,是 ES6 新增的冪運算符。

// 遞增和遞減
let c = 5;
console.log(c++); // 後綴遞增: 輸出5,然後c變為6
console.log(++c); // 前綴遞增: c先變為7,然後輸出7

// 一元加和減
let d = "3";
console.log(+d);  // 一元加: 將字符串轉換為數字 3
console.log(-d);  // 一元減: 將字符串轉換為數字並取反 -3

比較運算符:

  • 特性:比較兩個值並返回布爾結果。
  • '=='進行類型轉換後比較,而 '===' 不進行類型轉換。
    包括: ==, ===, !=, !==, >, <, >=, <=
console.log(a == "10");  // 相等(寬鬆): true
console.log(a === "10"); // 嚴格相等: false
console.log(a != b);     // 不相等: true
console.log(a > b);      // 大於: true
console.log(a <= 10);    // 小於等於: true

邏輯運算符:

  • 特性:用於組合多個條件。
  • '&&'和'||'具有短路評估特性。
  • '!'運算符將布爾值取反。
let x = true, y = false;
console.log(x && y); // 邏輯與: false
console.log(x || y); // 邏輯或: true
console.log(!x);     // 邏輯非: false

賦值運算符:

  • 特性:將右側的值賦給左側的變量。
  • 複合賦值運算符(如'+=','-=')結合了運算和賦值。
let c = 5;
c += 2; // 等同於 c = c + 2
console.log(c); // 7

條件(三元)運算符:

  • 語法: condition ? expr1 : expr2。如果條件為真,返回expr1,否則返回expr2
  • 特性: 提供簡潔的 if-else 邏輯。
  • 可以嵌套使用,但過度嵌套會降低可讀性。
let age = 20;
let status = (age >= 18) ? "成年" : "未成年";
console.log(status); // "成年"

位運算符:

  • 特性: 直接操作二進制位。
  • 性能高,但可讀性較差。
  • 常用於底層編程或優化。
    包括: &(與), |(或), ^(異或), ~(非), <<(左移), >>(右移), >>>(無符號右移)
let num1 = 5, num2 = 3;
console.log(num1 & num2);  // 位與: 1
console.log(num1 | num2);  // 位或: 7
console.log(num1 ^ num2);  // 位異或: 6
console.log(~num1);        // 位非: -6
console.log(num1 << 1);    // 左移: 10
console.log(num1 >> 1);    // 右移: 2

字符串運算符:

  • 特性: '+' 用於字符串拼接。
  • 當 '+' 的操作數中有字符串時,會進行字符串拼接而非數學加法。
let str1 = "Hello", str2 = "World";
console.log(str1 + " " + str2); // "Hello World"

類型運算符:

  • 特性: 用於檢查或確定值的類型。
  • 'typeof' 返回一個字符串,表示未經計算的操作數的類型。
  • 'instanceof' 用於檢查對象是否是特定類的實例。
console.log(typeof 42);        // "number"
console.log([] instanceof Array); // true

展開運算符(...):

  • 特性: 將數組或對象展開為單獨的元素。
  • 在函數調用、數組字面量和對象字面量中很有用。
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

表達式

表達式可以是簡單的單個值,也可以是複雜的組合運算。

  • 運算符優先級:不同運算符有不同的優先級,影響表達式的計算順序。
  • 運算符結合性:決定了相同優先級的運算符的執行順序。
// 複合算術表達式
let result = (5 + 3) * 2 / 4 - 1;
console.log(result); // 3

// 邏輯表達式
let isAdult = age >= 18 && hasID;

// 條件表達式
let greeting = isAdult ? "Welcome!" : "Sorry, adults only.";

// 函數表達式
const square = function(x) { return x * x; };

// 箭頭函數表達式
const cube = x => x * x * x;

// 物件字面量中的表達式
const obj = {
  name: "John",
  age: 30,
  isAdult: age >= 18,
  greet() { console.log("Hello!"); }
};

// 解構賦值中的表達式
const { name, age: userAge = 18 } = obj;

// 模板字面量中的表達式
console.log(`${name} is ${userAge} years old.`);

短路評估

邏輯與(&&)的短路評估:

  • 如果左側操作數為falsy立即返回左側操作數,不評估右側。
  • 如果左側操作數為truthy,返回右側操作數。
  • 常用於條件執行代碼。

邏輯或(||)的短路評估:

  • 如果左側操作數為 truthy,立即返回左側操作數,不評估右側。
  • 如果左側操作數為 falsy,返回右側操作數。
  • 常用於提供默認值。

// 可選鏈操作符
可選鏈操作符(Optional Chaining Operator)是JavaScript中一個相對較新的特性,它提供了一種更加簡潔的方式來訪問可能為null或undefined的對象的屬性。
-使用'?.'來安全地訪問可能不存在的屬性。
-如果'?.'之前的值是null或undefined,表達式會短路並返回 undefined。

// 基本用法
const user = {
    name: 'Alice',
    address: {
        street: 'Main St',
        city: 'Wonderland'
    }
};
console.log(user.address?.street); // 'Main St'
console.log(user.contacts?.email); // undefined(不會拋出錯誤)

上一篇
d5 基本語法
下一篇
d7 控制結構
系列文
javascript基礎自學及各工具應用了解30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言